// mycomponent/multistageTab/cq-sticky/cq-sticky.js

var target = '.weui-sticky';
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    offsetTop: {
      type: Number,
      value: 0
    },
    zIndex: {
      type: Number,
      value: 99
    },
    disabled: {
      type: Boolean,
      value: false
    },
    container: {
      type: null
    },
    index: {
      type: Number,
      value: 0
    },
    sticky: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    fixed: false,
    height: 0,
    _attached: false,
    _containerHeight: 0
  },

  lifetimes: {
    attached: function attached() {
      this.data._attached = true;
      if (!this.data.disabled) this.initObserver();
    },
    detached: function detached() {
      this.data._attached = false;
      this.disconnectObserver();
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initObserver: function initObserver() {
      var _this = this;

      this.disconnectObserver();
      this.getRect(target).then(function (rect) {
        _this.setData({
          height: rect.height
        });
        _this.observerContent();
      });
    },
    observerContent: function observerContent() {
      var _this2 = this;

      var offsetTop = this.data.offsetTop;

      this.disconnectObserver('contentObserver');
      var contentObserver = this.createIntersectionObserver({
        thresholds: [0],
        initialRatio: 0
      });
      contentObserver.relativeToViewport({
        top: offsetTop
      });
      contentObserver.observe(target, function (res) {
        if (_this2.data.disabled) return;
        _this2.setFixed(res);
      });
      this.contentObserver = contentObserver;
    },
    disconnectObserver: function disconnectObserver(observerName) {
      if (observerName) {
        var observer = this[observerName];
        observer && observer.disconnect();
      } else {
        this.contentObserver && this.contentObserver.disconnect();
        this.containerObserver && this.containerObserver.disconnect();
      }
    },
    setFixed: function setFixed(res) {
      var {
        // bottom,
        top,
        // height
      } = res.boundingClientRect;
      var _data2 = this.data,
        // _containerHeight = _data2._containerHeight,
        // _relativeTop = _data2._relativeTop,
        offsetTop = _data2.offsetTop;

      var display = true;
      if (res.intersectionRatio == 0) {
        display = false;
      }
      var type = "up";
      // console.log(top, this.data.index)
      if (top <= 0) {
        // console.log("在上",this.data.index,res.intersectionRatio,offsetTop);
      } else if (top > 0 && top <= offsetTop && !display) {
        // console.log("在上",this.data.index,res.intersectionRatio,offsetTop)
      } else if (top > 0 && top < offsetTop) {
        // console.log("在上",this.data.index,res.intersectionRatio,offsetTop)
      } else {
        type = 'down';
        // console.log("在下",this.data.index,res.intersectionRatio,offsetTop)
      }
      this.triggerEvent('display', {
        display,
        index: this.data.index,
        type
      });
    },
    getRect: function getRect(selector) {
      var _this = this;
      return new Promise(function (resolve, reject) {
        _this.createSelectorQuery().select(selector).boundingClientRect(function (rect) {
          if (rect) {
            resolve(rect);
          } else {
            reject(new Error("can not find selector: " + selector));
          }
        }).exec();
      });
    },
  }
});